<template>
  <PageTable
    :search-options="options"
    :columns="columns"
    :data-source="sourceData"
    :loading="spinning"
    :pagination="{
      current: pagination.pageNum,
      pageSize: pagination.pageSize,
      total: pagination.total,
      onChange: (num, size) => setPagination((v) => ({ ...v, pageNum: num, pageSize: size }))
    }"
    @search="onSearchData"
  >
    <template #searchRight>
      <ATooltip title="刷新列表">
        <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
          {{ timer || '' }}
        </AButton>
      </ATooltip>
    </template>
    <template #searchCollapse>
      <AForm layout="inline" ref="formRef" :model="formState" @finish="onSearchData" @reset="onReset">
        <AFormItem label="用户名称" name="userName">
          <AInput v-model:value="formState.userName" placeholder="请输入用户名称"></AInput>
        </AFormItem>
        <AFormItem label="登录地址" name="ipAddress">
          <AInput v-model:value="formState.ipAddress" placeholder="请输入登录地址"></AInput>
        </AFormItem>
        <AFormItem label="登录地点" name="loginLocation">
          <AInput v-model:value="formState.loginLocation" placeholder="请输入登录地点"></AInput>
        </AFormItem>
        <AFormItem>
          <ASpace>
            <AButton html-type="reset">重置</AButton>
            <AButton type="primary" html-type="submit">搜索</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </template>
    <template #bodyActionCell="{ record }">
      <template v-if="!record.allowDisable">
        <APopconfirm
          title="您确定删除该数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete(record.tokenId)"
        >
          <AButton type="link" danger size="small" :icon="createVNode(DeleteOutlined)">强退</AButton>
        </APopconfirm>
      </template>
    </template>
  </PageTable>
</template>

<script setup>
import { createVNode, ref, reactive, toValue, onBeforeMount } from 'vue';
import { PageTable } from '@/components/templates';

import { DeleteOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { useFetchData, useState } from '@/hooks';
import { fetchGetOnlineList, fetchForceLogout } from '@/api/monitor/online.js';

const options = [
  { label: '综合搜索', value: 'keyword', placeholder: '综合搜索' },
  { label: '用户名称', value: 'userName', placeholder: '请输入用户名称' },
  { label: '登录地址', value: 'ipAddress', placeholder: '请输入登录地址' },
  { label: '登录地点', value: 'loginLocation', placeholder: '请输入登录地点' },
  { label: '浏览器类型', value: 'browser', placeholder: '请输入浏览器类型' },
  { label: '操作系统', value: 'os', placeholder: '请输入操作系统' }
];

const columns = [
  { key: 'index', title: '序号', dataIndex: 'index', align: 'center' },
  { key: 'tokenId', title: '会话ID', dataIndex: 'tokenId' },
  { key: 'userName', title: '用户名称', dataIndex: 'userName' },
  { key: 'ipAddress', title: '登录地址', dataIndex: 'ipAddress' },
  { key: 'loginLocation', title: '登录地点', dataIndex: 'loginLocation' },
  { key: 'browser', title: '浏览器类型', dataIndex: 'browser' },
  { key: 'os', title: '操作系统', dataIndex: 'os' },
  { key: 'loginTime', title: '访问时间', dataIndex: 'loginTime' },
  { key: 'action', title: '操作' }
];

const initValues = { userName: '', ipAddress: '' };
const formRef = ref();
const formState = reactive(initValues);
const defaultPagination = { pageNum: 1, pageSize: 20, total: 0 };
const [pagination, setPagination] = useState(defaultPagination);
const {
  sourceData,
  spinning: spinning,
  timer,
  onFetchData,
  onSearchData,
  onResetData,
  onRefreshData
} = useFetchData(fetchGetOnlineList);

onBeforeMount(() => {
  onFetchData().then(() => setPagination((v) => ({ ...v, total: toValue(sourceData).length })));
});

const onReset = () => {
  onResetData();
  toValue(formRef).resetFields();
};

const onDelete = async (tokenId) => {
  await fetchForceLogout(tokenId);
  onRefreshData(true);
};
</script>

<style lang="scss" scoped></style>
